<template>
    <el-row :gutter="20">
        <el-col :span="14">
            <el-table
                    :data="fieldsData"
                    style="width: 100%"
                    height="200"
                    empty-text="未设置监听器"
                    highlight-current-row
                    @row-click="val => {currentRow = (currentRow && currentRow.key === val.key) ? null : val}"
                    ref="singleTable"
            >
                <el-table-column prop="fieldName" label="字段名称">
                    <template #default="scope">
                        <span>{{ scope.row.fieldName || '未设置字段名称'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fieldType" label="字段类型">
                    <template #default="scope">
                        <span>{{(scope.row.fieldType && Object.values(FIELD_TYPE).find(item => item.VALUE === scope.row.fieldType).NAME) || '未设置字段类型'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="fieldValue"
                        width="150"
                        label="字段值">
                    <template #default="scope">
                        <span>{{scope.row.fieldValue  || '未设置字段值'}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="listeners-operate-btn-container">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="add"></el-button>
                <el-button type="primary" size="mini" icon="el-icon-minus" @click="del"></el-button>
            </el-row>
        </el-col>
        <el-col :span="10">
            <c-form :form="form" :label-width="'100px'" :inline=false ref="formRef"
                    v-if="currentRow !== null && visible"></c-form>
            <p v-if="currentRow === null">未选择字段</p>
        </el-col>
    </el-row>
</template>

<script>
    import Form from "@/components/Form.vue";
    import {fieldForm} from "@/components/bpmn/components/bpmnPropertiesPanel/forms";
    import {FIELD_TYPE} from "@/components/bpmn/constants/constant";

    export default {
        name: "ClassFieldsChoose",
        components: {
            "c-form": Form
        },
        props: {
            businessObj:{
                type: Object
            }
        },
        data() {
            return {
                form: fieldForm.call(this),
                currentRow: null,
                visible: true,
                fieldsData: [],
                FIELD_TYPE
            }
        },
        watch: {
            currentRow: function (val) {
                this.$refs.singleTable.setCurrentRow(val)
                if(val){
                    this.form.models.fieldName = val.fieldName
                    this.form.models.fieldType = val.fieldType
                    this.form.models.fieldValue = val.fieldValue
                }
            }
        },
        methods: {
            // 添加监听器
            add() {
                const field = {
                    key: new Date().getTime(),
                    fieldName: "",
                    fieldValue: "",
                }
                this.fieldsData.push(field);
                this.currentRow = field;
            },

            // 移除监听器
            del() {
                const fieldIndex = this.fieldsData.findIndex(item => {
                    return item.key === this.currentRow?.key
                });
                if (fieldIndex !== -1) {
                    this.currentRow = this.fieldsData.length - 1 === fieldIndex ? null : this.fieldsData[fieldIndex + 1];
                    this.fieldsData.splice(fieldIndex, 1);
                }
            },

            changeField(key, val){
                Object.assign(this.currentRow, {
                    [key]: val
                })
            },
        },
        mounted(){
            this.form.items.fieldType.options = Object.values(FIELD_TYPE).map(obj => ({
                value: obj.VALUE,
                label: obj.NAME
            }))
            if(this.businessObj?.extensionElements?.values){
                const data = this.businessObj?.extensionElements?.values?.map((item, index) => ({
                    key: index,
                    fieldName: item.name,
                    fieldValue: item.string || item.expression,
                    fieldType: item.string ? FIELD_TYPE.EXPRESS.VALUE : FIELD_TYPE.STRING.VALUE
                }))
                this.fieldsData = data
            }
        }
    }
</script>

<style scoped lang="scss">
    .listeners-operate-btn-container {
        justify-content: flex-end;
        margin-top: 5px;
    }
</style>